<template>
    <div class="box">
        <div class="to">
            <img class="logo" src="../assets/logo.png" alt="">
        </div>
        <el-card class="box-card">
          <el-row>
              <el-col></el-col>
          </el-row>
          <el-form ref="customform" :model="form" label-width="80px"
          status-icon :rules="rules">
              <el-form-item  label="用户账号" prop="username" >
                  <el-input prefix-icon="iconfont icon-user" v-model="form.username"></el-input>
              </el-form-item>
              <el-form-item  label="用户密码" prop="password">
                <!-- @keyup.enter.native="onSubmit('customform')" 按回车(Enter)也能登录 -->
                  <el-input prefix-icon="iconfont icon-3702mima" @keyup.enter.native="onSubmit('customform')" v-model="form.password"
                  type="password"></el-input>
              </el-form-item>
              <el-form-item>
                  <el-button type="primary"  @click="onSubmit('customform')">
                      登录</el-button>
                  <el-button @click="onChongzhi">重置</el-button>
              </el-form-item>
              
          </el-form>
      </el-card>
    </div>
</template>

<script>
import {validateUserName,validatePassword} from '../utils/CheckForm'
// import {login} from "../api/LoginApi"
export default {
    name: 'Xm01Login',

    data() {
        return {
            form:{
                username:'',
                password:''
          },
          rules:{
            username: [
                { validator: validateUserName, trigger: 'blur' }
            ],
            password: [
                { validator: validatePassword, trigger: 'blur' }
            ],
          }
        };
    },

    mounted() {
    },

    methods: {
        
        //重置
        onChongzhi(){
                this.$refs.customform.resetFields();
            },
        //把onSubmit改成login
        //Vue.prototype.$message=Massage
        // onSubmit(){
        //     this.$refs.customform.validate(async(ok)=>{
        //         console.log('验证',ok);
        //         if (ok==false) {
        //             this.$message.error('错误，请检查')
        //             return;
        //         }
        //         let data=await this.$http.post("/api/private/v1/login",
        //         {"username":this.form.username,
        //         "password":this.form.password})
        //         if (data.meta.status!=200) {
        //             return this.$message.error(data.meta.msg)
        //         }
        //         sessionStorage.setItem('token',data.token)
        //         this.$router.push({name:'home'})
        //         // console.log(data);
        //     })
        // },
        //登录
        //根据表单的ref属性取得表单对象并进行验证
        onSubmit(){
            this.$refs.customform.validate(async (valid) => {
            if (valid) {
                let data=
                await this.$http.post("/api/private/v1/login",
                {"username":this.form.username,
                "password":this.form.password})
                if (data.meta.status==200) {
                    sessionStorage.setItem('token',data.data.token)
                    console.log(data.data.token);
                    this.$router.push({name:'home'})
                    return this.$message.success(data.meta.msg)
                   
                }else{
                    return this.$message.error(data.meta.msg)
                }
                
                
                // console.log(data.token);

                
                // let {data}=
                // await login(this.form.username,
                // this.form.password);
                // sessionStorage.setItem("token",data.token)
                // console.log(data.token);
                // console.log(data);
                // this.$router.push({name:'homepage'})
            }
            });
        }
    },
};
</script>

<style lang="scss" scoped>
    .el-col{
      text-align: center;
      font-size: 24px;
      font-weight: bold;
      padding-bottom: 24px;
      
  }
  .box{
    //背景图片
      background: url(../assets/meinv.png) no-repeat;
      background-position: center;
      height: 100%;
      width: 100%;
      
      background-size: cover;
      position: fixed;
        
      display: flex;
      justify-content: center;
      align-items: center;
      /*100vw: 视窗的100%宽度
      100vh: 视窗的100%高度*/
      height: 100vh;

  }
  .box-card{
      width:500px;
      height:400px;
      position: absolute;
      //实现登录框半透明
      background: rgba(255,255,255,0.1);
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      justify-content: center;
  }
  .to{
   
   //给图片设置透明度
   // opacity: 0.9;
   .logo{
       width: 200px;
       height: 200px;
       border: 3px solid honeydew;
       border-radius: 50%;
       padding: 3px;
       box-shadow: 0 0 10px rgba(22, 16, 16, 0.1);
       position: absolute;
       z-index: 999;
       // top: 70px;
       transform: translate(-50%,-150%);
    }
   
    }
    // .but{
    //     // display: flex;
    //     // justify-content: flex-end;
    // }
</style>